<template>
  <div id="app">
        <header>
            头部
        </header>
      <div>
          <my-dl v-for="(item,ind) in list" :name="item.name"></my-dl>
      </div>
      <footer>
          底部
      </footer>
  </div>
</template>

<script>
import myDl from './components/my-dl'
export default {
  name: 'App',
  components: {
    myDl
  },
  data(){
      return {
          list:[
              {
                  "name":"小城外婆尧1"
              },
              {
                  "name":"小城外婆尧2"
              },
              {
                  "name":"小城外婆尧3"
              }
          ]
      }
  }
}
</script>

<style>
html,body{
    width:100%;
    height:100%;
    overflow: hidden;
}
#app{
    width:100%;
    height:100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
header,footer{
    width:100%;
    height:44px;
    background: pink;
}
</style>
